<template>

  <div>
    <a-descriptions title="订单详情:">
      <a-descriptions-item label="订单编号:">
        <b v-text="Number(orderDetailsData.order.id)"></b>
      </a-descriptions-item>
      <a-descriptions-item label="运单编号:">
        <b v-text="Number(orderDetailsData.transportOrder.id)"></b>
      </a-descriptions-item>
      <a-descriptions-item label="下单时间:">
        <b v-text="orderDetailsData.order.createTime"></b>
      </a-descriptions-item>
      <a-descriptions-item label="订单状态:">
        <p v-if="Number(orderDetailsData.order.status)==1"><b>下单,待取件</b></p>
        <p v-if="Number(orderDetailsData.order.status)==2"><b>网点自寄</b></p>
        <p v-if="Number(orderDetailsData.order.status)==3"><b>已取件</b></p>
        <p v-if="Number(orderDetailsData.order.status)==4"><b>网点入库,待发车</b></p>
        <p v-if="Number(orderDetailsData.order.status)==5"><b>运输中</b></p>
        <p v-if="Number(orderDetailsData.order.status)==6"><b>网点出库，待派送</b></p>
        <p v-if="Number(orderDetailsData.order.status)==7"><b>派送中</b></p>
        <p v-if="Number(orderDetailsData.order.status)==8"><b>签收（已签收 或 拒收）</b></p>
      </a-descriptions-item>
      <a-descriptions-item label="预计到达日期:">
        <b v-text="orderDetailsData.order.estimatedArrivalTime"></b>
      </a-descriptions-item>
    </a-descriptions>

    <!--    折叠面板-->
    <el-collapse>

      <el-collapse-item title="基本信息" name="1">
        <a-descriptions title="发货方:">
          <a-descriptions-item label="发货姓名:">
            <b>{{ orderDetailsData.order.senderName }}</b>
          </a-descriptions-item>

          <a-descriptions-item label="发货方地址:">
            <area-cascader disabled="disabled" type="code" v-model="senderAddress" :level="1" :data="pcaa"
            ></area-cascader>
          </a-descriptions-item>
          <br/>

          <a-descriptions-item label="发货方电话:">
            <b>{{ orderDetailsData.order.senderPhone }}</b>
          </a-descriptions-item>

          <a-descriptions-item label="详细地址:">
            <b>{{ orderDetailsData.order.senderAddress }}</b>
          </a-descriptions-item>
        </a-descriptions>
        <br/>
        <br/>
        <a-descriptions title="收货方:">

          <a-descriptions-item label="收货方姓名:">
            <b>{{ orderDetailsData.order.receiverName }}</b>

          </a-descriptions-item>

          <a-descriptions-item label="收货方地址:">
            <area-cascader disabled="disabled" type="code" v-model="receiverAddress" :level="1" :data="pcaa"
            ></area-cascader>

          </a-descriptions-item>
          <br/>
          <a-descriptions-item label="收货方电话:">
            <b>{{ orderDetailsData.order.receiverPhone }}</b>

          </a-descriptions-item>

          <a-descriptions-item label="详细地址:">
            <b>{{ orderDetailsData.order.receiverAddress }}</b>
          </a-descriptions-item>
        </a-descriptions>

        <br/>
        <br/>
        <el-form v-model="orderDetailsData">
          <el-form-item label="距离:">
            <b>{{ orderDetailsData.order.distance }}</b>千米
          </el-form-item>
        </el-form>

      </el-collapse-item>

      <el-collapse-item title="费用信息" name="2">
        <a-descriptions>
          <a-descriptions-item label="运费">
            <b>{{ orderDetailsData.order.amount }}</b>元
          </a-descriptions-item>

          <a-descriptions-item label="支付方式">
            <b v-if="Number(orderDetailsData.order.paymentMethod)==1">预结</b>
            <b v-if="Number(orderDetailsData.order.paymentMethod)==2">到付</b>
          </a-descriptions-item>

          <a-descriptions-item label="付款状态">
            <b v-if="Number(orderDetailsData.order.paymentStatus)==1">未付</b>
            <b v-if="Number(orderDetailsData.order.paymentStatus)==2">已付</b>
            <b v-if="Number(orderDetailsData.order.paymentStatus)==3">已过期</b>
          </a-descriptions-item>
        </a-descriptions>
      </el-collapse-item>

      <el-collapse-item title="货品信息" name="3">
        <a-descriptions>
          <a-descriptions-item label="货品名称">
            <b>{{ orderDetailsData.orderCargo.name }}</b>
          </a-descriptions-item>

          <a-descriptions-item label="货品数量">
            <b>{{ orderDetailsData.orderCargo.quantity }}</b>

          </a-descriptions-item>

          <a-descriptions-item label="货品类型">
            <b>{{ orderDetailsData.goodsTypeName }}</b>
          </a-descriptions-item>

          <a-descriptions-item label="重量(千克)">
            <b>{{ orderDetailsData.orderCargo.totalWeight }}</b>

          </a-descriptions-item>

          <a-descriptions-item label="体积(方)">
            <b>{{ orderDetailsData.orderCargo.totalVolume }}</b>

          </a-descriptions-item>
          <a-descriptions-item label="货值(元)">
            <b>{{ orderDetailsData.orderCargo.cargoValue }}</b>

          </a-descriptions-item>

          <a-descriptions-item label="条形编码">
            <b>{{ orderDetailsData.orderCargo.cargoBarcode }}</b>

          </a-descriptions-item>

          <a-descriptions-item label="备注">
            <b>{{ orderDetailsData.orderCargo.remark }}</b>
          </a-descriptions-item>
        </a-descriptions>
      </el-collapse-item>

      <el-collapse-item title="取件信息" name="4">
        <div v-if="orderDetailsData.pickup">
          <a-descriptions>
            <a-descriptions-item label="所在网点:">
              <b>{{ orderDetailsData.pickup.agencyName }}</b>
            </a-descriptions-item>

            <a-descriptions-item label="取件类型:">
              <b v-if="Number(orderDetailsData.pickup.taskType==1)">取件任务</b>
              <b v-if="Number(orderDetailsData.pickup.taskType==2)">派件任务</b>
            </a-descriptions-item>

            <a-descriptions-item label="作业状态:">
              <b v-if="Number(orderDetailsData.pickup.status==1)">待执行</b>
              <b v-if="Number(orderDetailsData.pickup.status==2)">进行中</b>
              <b v-if="Number(orderDetailsData.pickup.status==3)">待确认</b>
              <b v-if="Number(orderDetailsData.pickup.status==4)">已完成</b>
              <b v-if="Number(orderDetailsData.pickup.status==5)">已取消</b>
            </a-descriptions-item>

            <a-descriptions-item label="取件快递员:">
              <b>{{ orderDetailsData.pickup.courierName }}</b>
            </a-descriptions-item>

            <a-descriptions-item label="快递员电话:">
              <b>{{ orderDetailsData.pickup.phone }}</b>

            </a-descriptions-item>
          </a-descriptions>
        </div>
      </el-collapse-item>
      <el-collapse-item title="派送信息" name="5">
        <div v-if="orderDetailsData.dispatch">
          <a-descriptions>
            <a-descriptions-item label="所在网点:">
              <b>{{ orderDetailsData.dispatch.agencyName }}</b>
            </a-descriptions-item>

            <a-descriptions-item label="取件类型:">
              <b v-if="Number(orderDetailsData.dispatch.taskType==1)">取件任务</b>
              <b v-if="Number(orderDetailsData.dispatch.taskType==2)">派件任务</b>
            </a-descriptions-item>

            <a-descriptions-item label="作业状态:">
              <b v-if="Number(orderDetailsData.dispatch.status==1)">待执行</b>
              <b v-if="Number(orderDetailsData.dispatch.status==2)">进行中</b>
              <b v-if="Number(orderDetailsData.dispatch.status==3)">待确认</b>
              <b v-if="Number(orderDetailsData.dispatch.status==4)">已完成</b>
              <b v-if="Number(orderDetailsData.dispatch.status==5)">已取消</b>
            </a-descriptions-item>

            <a-descriptions-item label="取件快递员:">
              <b>{{ orderDetailsData.pickup.courierName }}</b>
            </a-descriptions-item>

            <a-descriptions-item label="快递员电话:">
              <b>{{ orderDetailsData.pickup.phone }}</b>

            </a-descriptions-item>
          </a-descriptions>
        </div>
      </el-collapse-item>


      <el-collapse-item title="订单轨迹" name="6">
        <el-container>
          <el-aside width="1400px">
            <div id="container" style="height: 450px"></div>
            <div id="panel"></div>
          </el-aside>
        </el-container>
      </el-collapse-item>
    </el-collapse>

  </div>

</template>

<script>
import order from '@/api/order/order'
import { pca, pcaa } from 'area-data'
import AMap from 'AMap'

export default {
  name: 'order-details',
  data() {
    return {
      //高德地图
      map: null,
      drivingOption: null,
      marker: null,
      // 构造路线导航类
      driving: null,
      senderAddress: [],//发送地址
      receiverAddress: [],//接收地址
      pca: pca,
      pcaa: pcaa,
      /**
       *货物重量信息页面开关
       */
      orderLocationFlag: false,
      orderDetailsData: {},
      goodsType: [],//货物类型
      //订单当前位置
      //TODO 暂且使用初始位置,整合时在调用druid
      orderLng: '',
      orderLat: ''
    }
  },
  methods: {
    showMap() {
      /**
       * 将发送坐标和接收坐标分割
       *
       * 起始坐标
       */
      let startLng = this.orderDetailsData.orderLocation.sendLocation.substring(0, this.orderDetailsData.orderLocation.sendLocation.indexOf(','))
      let startLat = this.orderDetailsData.orderLocation.sendLocation.substring(this.orderDetailsData.orderLocation.sendLocation.indexOf(',') + 1)

      /**
       *终点坐标
       */
      let endLng = this.orderDetailsData.orderLocation.receiveLocation.substring(0, this.orderDetailsData.orderLocation.receiveLocation.indexOf(','))
      let endLat = this.orderDetailsData.orderLocation.receiveLocation.substring(this.orderDetailsData.orderLocation.receiveLocation.indexOf(',') + 1)

      //地图初始化
      this.map = new AMap.Map('container', {
        center: [startLng, startLat],
        zoom: 14
      })

      this.drivingOption = {
        policy: AMap.DrivingPolicy.LEAST_TIME,
        ferry: 1, // 是否可以使用轮渡
        province: '京',// 车牌省份的汉字缩写
        map: this.map
      }
      // 构造路线导航类
      this.driving = new AMap.Driving(this.drivingOption)
      // 根据起终点经纬度规划驾车导航路线
      this.driving.search(new AMap.LngLat(startLng, startLat),
        new AMap.LngLat(endLng, endLat), (status, result) => {
          // result即是对应的驾车导航信息，相关数据结构文档请参考 https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
          if (status === 'complete') {
            if (result.routes && result.routes.length) {
              log.success('绘制驾车路线完成')

              /**
               * 订单位置点
               */
              this.orderLng = startLng
              this.orderLat = startLat
              this.marker = new AMap.Marker({
                map: this.map,
                position: [this.orderLng, this.orderLat],
                icon: 'https://webapi.amap.com/images/car.png',
                offset: new AMap.Pixel(-26, -13),
                autoRotation: true,
                angle: 90
              })

              this.marker.setMap(this.map)
            }
          } else {
            error.error('获取驾车数据失败：' + result)
          }
        })
    },
    getGoodsType() {
      order.getGoodsType().then(data => {
        this.goodsType = data.data
      })
      this.orderLocationFlag = true
    },
    /**
     * 根据订单id查询订单详情
     * @param id
     */
    getOrderInfoByOrderId(id) {
      order.getOrderInfoByOrderId(id).then(data => {
        this.orderDetailsData = data.data
        /**
         * 发送地址
         */
        this.senderAddress.push(this.orderDetailsData.order.senderProvinceId)
        this.senderAddress.push(this.orderDetailsData.order.senderCityId)
        this.senderAddress.push(this.orderDetailsData.order.senderCountyId)

        /**
         * 接收地址
         */
        this.receiverAddress.push(this.orderDetailsData.order.receiverProvinceId)
        this.receiverAddress.push(this.orderDetailsData.order.receiverCityId)
        this.receiverAddress.push(this.orderDetailsData.order.receiverCountyId)
        setTimeout(() => {
          this.$nextTick(() => {
            this.showMap()
          })
        }, 3000)
      })
    }
  }, mounted() {
    if (this.$route.params && this.$route.params.id) {
      this.getOrderInfoByOrderId(this.$route.params.id)
      this.getGoodsType()
    }

  }
}
</script>

<style scoped>
html,
body,
#container {
  width: 100%;
  height: 100%;
}

#panel {
  position: fixed;
  background-color: white;
  max-height: 90%;
  overflow-y: auto;
  top: 10px;
  right: 500px;
  width: 280px;
}

#panel .amap-call {
  background-color: #009cf9;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

#panel .amap-lib-driving {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  overflow: hidden;
}
</style>
